<script>
import echarts, { number } from 'echarts'
import BaseChart from '@/components/BaseChart.vue'

export default {
  components: {
    BaseChart,
  },
  data() {
    return {}
  },
  props: {
    data: {
      type: Array,
      default() {
        return []
      },
    },
    topList: {
      type: Array,
      default() {
        return []
      },
    },
    countryList: {
      type: Array,
      default() {
        return []
      },
    },
  },
  computed: {
    dataList() {
      const topArr = this.topList.slice(0, 9)
      const topList = topArr.map(item => {
        return {
          value: (item?.pay_user_count / item?.user_count) * 100,
          name: item?.country_name || '未知',
        }
      })
      return topList
    },
    option() {
      return {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          show: false,
        },
        series: [
          {
            type: 'pie',
            radius: '60%',
            center: ['50%', '50%'],
            label: {
              show: true,
              fontSize: 11,
              formatter(param) {
                return param.name + ' (' + param.percent + '%)'
              },
            },
            data: this.dataList ?? [],
          },
        ],
      }
    },
  },

  methods: {},
}
</script>

<template>
  <base-chart
    height="100%"
    title="用户付费率"
    :option="option">
  </base-chart>
</template>

<style lang="scss" scoped></style>
